<template>
  <!-- 数据报表目录表单弹窗 -->
  <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="50%"
      draggable
      @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">

      <el-row>
        <el-col :span="12">
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-if="!props.isReadonly" v-model="formData.directoryName" placeholder="请输入目录名称" clearable/>

            <span v-else>{{ formData.directoryName }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="目录编号" prop="directoryCode">
            <el-input v-if="!props.isReadonly" v-model="formData.directoryCode" placeholder="请输入目录编号" clearable/>

            <span v-else>{{ formData.directoryCode }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enabled">
            <el-select style="width: 100%" v-if="!props.isReadonly" v-model="formData.enabled" placeholder="请选择是否启用" clearable>
              <el-option
                  v-for="item in dictionaryStore.filterDictList('Enabled')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            <span v-else>{{ dictionaryStore.filterDictName('Enabled', formData.enabled) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注" prop="remarks">
            <el-input v-if="!props.isReadonly" v-model="formData.remarks" placeholder="请输入备注" clearable/>

            <span v-else>{{ formData.remarks }}</span>
          </el-form-item>
        </el-col>

      </el-row>


    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "DMPDATAREPORTDIRECTORYADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  parentId: {
    type: String,
    default: () => {
      return "";
    },
  },
});

const visibleDialog = ref(false);
watch(
    () => props.visible,
    (newVal: boolean) => {
      visibleDialog.value = newVal;
    }
);

const rules = reactive({
  directoryName: [
    {required: true, message: "请输入目录名称", trigger: "blur"},
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"}
  ],
  directoryCode: [
    {required: true, message: "请输入目录编号", trigger: "blur"},
    {min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur"}
  ],
  remarks: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  enabled: [
    {required: true, message: "请输选择是否启用", trigger: "blur"},
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "", directoryName: "", directoryCode: "", parentId: "", allId: "", allCode: "", allName: "", remarks: "", enabled: "", deleted: "", createdUserId: "", createTime: "", lastUpdatedUserId: "", createdUserName: "", lastUpdateTime: "", lastUpdatedUserName: "",
});

watch(
    () => props.data,
    (newVal: any) => {
      formData.id = ""
      if (newVal?.id) {
        const {id, directoryName, directoryCode, parentId, allId, allCode, allName, remarks, enabled, deleted, createdUserId, createTime, lastUpdatedUserId, createdUserName, lastUpdateTime, lastUpdatedUserName,} = newVal;
        Object.assign(formData, {id, directoryName, directoryCode, parentId, allId, allCode, allName, remarks, enabled, deleted, createdUserId, createTime, lastUpdatedUserId, createdUserName, lastUpdateTime, lastUpdatedUserName,});
      }
    }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = ""
  formData.directoryName = ""
  formData.directoryCode = ""
  formData.parentId = ""
  formData.allId = ""
  formData.allCode = ""
  formData.allName = ""
  formData.remarks = ""
  formData.enabled = ""
  formData.deleted = ""
  formData.createdUserId = ""
  formData.createTime = ""
  formData.lastUpdatedUserId = ""
  formData.createdUserName = ""
  formData.lastUpdateTime = ""
  formData.lastUpdatedUserName = ""
}

const loading = ref(false);

/** 数据报表目录保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      formData.parentId = props.parentId
      await request({
        url: "/dmpAdmin/dmpdatareportdirectory/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}


// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});


</script>
